<template>
  <div class="flex flex-row h-full" id="wrap">
    <!-- <div
      class="flex-1 flex justify-center items-center bg-cover bg-center"
      style="background-image: url('/resource/health/img/detail/标题.png')"
    >
      <p class="text-white text-4xl font-bold">健康管理系统</p>
    </div> -->
    <div class="leftSide" id="leftSide">
      <div class="humanPic">
        <img class="shiwangmo" src="/resource/health/img/视网膜病变.png" />
        <img class="kouqiang" src="/resource/health/img/口腔疾病未检出.png" />
        <img class="shenjing" src="/resource/health/img/神经血管良好.png" />
        <img class="shen" src="/resource/health/img/肾病变未检出.png" />
        <img class="tangniaobing" src="/resource/health/img/糖尿病足未检出.png" />
        <!-- <div class="rsImg xueya">
          <div class="top">
            <div class="title">
              <div>血压</div>
              <div class="text-grey">Blood Pressure</div>
            </div>
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="value" style="font-size: 20px">
              <div class="value" style="font-size: 20px">
                <div><span id="xueya_shousuo">0</span></div>
                <div><span id="xueya_shuzhang" style="margin-left: 8px">0</span></div>
              </div>
            </div>
            <div class="unit text-grey">mmHg</div>
          </div>
          <img src="/resource/health/img/detail/男血压.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span>2023-11-09 13:32:21</span></div>
            <div>血压参考值为 <span class="cankao">90-139mmHg</span></div>
          </div>
        </div>
        <div class="rsImg xinlv">
          <div class="top">
            <div class="title">
              <div>心率</div>
              <div class="text-grey">Heart Rate</div>
            </div>
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="value" id="xinlv_zhi">0</div>
            <div class="unit text-grey">次/分钟</div>
          </div>
          <img src="/resource/health/img/detail/男心率.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span id="xinlv_shijian">2023-11-09 13:32:21</span></div>
            <div>心率参考值为 <span class="cankao">60-100/分钟</span></div>
          </div>
        </div>
        <div class="rsImg tiwen">
          <div class="top">
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="unit text-grey">℃</div>
            <div class="title">
              <div>体温</div>
              <div class="text-grey">Temperature</div>
            </div>
            <div class="value">36.1</div>
          </div>
          <img src="/resource/health/img/detail/男体温.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span>2023-11-09 13:32:21</span></div>
            <div>体温参考值为 <span class="cankao">36-37℃</span></div>
          </div>
        </div>
        <div class="rsImg shuimian">
          <div class="top">
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="unit text-grey">分</div>
            <div class="title">
              <div>睡眠评分</div>
              <div class="text-grey">Sleep Quality</div>
            </div>
            <div class="value">99</div>
          </div>
          <img src="/resource/health/img/detail/男睡眠评分.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span>2023-11-09 13:32:21</span></div>
            <div>空腹血糖参考值为 <span class="cankao">3.9-6mmol/L</span></div>
          </div>
        </div>
        <div class="rsImg xueyang">
          <div class="top">
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="unit text-grey">%</div>
            <div class="title">
              <div>血氧</div>
              <div class="text-grey">Blood Oxygen</div>
            </div>
            <div class="value" id="xueyang">0</div>
          </div>
          <img src="/resource/health/img/detail/男血氧.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span id="xueyang_shijian"></span></div>
            <div>血氧饱和度参考值为 <span class="cankao">95%-100%</span></div>
          </div>
        </div>
        <div class="rsImg xuetang">
          <div class="top">
            <div class="title">
              <div>血糖</div>
              <div class="text-grey">Blood Glucose</div>
            </div>
            <img class="value-box" src="/resource/health/img/detail/正常.png" />
            <div class="value" id="xuetang-zhi">0</div>
            <div class="unit text-grey">mmol/L</div>
          </div>
          <img src="/resource/health/img/detail/男血糖.png" class="line-width" />
          <div class="bottom">
            <div>更新时间 <span id="xuetang_shijian"></span></div>
            <div>空腹血糖参考值为 <span class="cankao">3.9-6mmol/L</span></div>
          </div>
        </div> -->
      </div>
      <!-- <div class="shijianzhou">
        <Time />
      </div> -->
    </div>
    <div class="rightSide" id="rightSide">
      <div class="userInfo">
        <div><img class="border_1" src="/resource/health/img/detail/上.png" /></div>
        <div class="photo">
          <img src="/resource/health/img/detail/tb.png" />
        </div>
        <div class="intro">
          <div class="flex flex-row title">
            <div class="left">{{ userInfo.name }}</div>
            <div class="right">{{ userInfo.illness }}</div>
          </div>
          <div class="flex flex-row desc">
            <div class="left">{{ userInfo.sex }}，{{ userInfo.age }}岁</div>
            <div class="right result">控制满意</div>
          </div>
          <div>
            <img class="border_1 fenge" src="/resource/health/img/detail/分割线.png" alt="" />
          </div>
        </div>
        <div class="row info">
          <ul>
            <li
              >身高<span>{{ userInfo.height }}cm</span></li
            >
            <li
              >体重<span id="tizhong">{{ userInfo.weight }}</span
              ><span>斤</span></li
            >
            <li>BMI <span>0</span></li>
            <li>饮酒 <span>50ml</span></li>
            <li>抽烟 <span>无</span></li>
          </ul>
          <ul>
            <li>家族病史<span>无</span></li>
            <!-- <li>生日<span>1970-07-09</span></li> -->
            <li>治疗方案 <span>无</span></li>
            <li>病史 <span>无</span></li>
          </ul>
        </div>
        <div><img class="border_1" src="/resource/health/img/detail/下.png" /></div>
      </div>
      <div class="warning-box">
        <h3>异常告警信息</h3>
        <ul>
          <li>
            <img src="/resource/health/img/detail/异常.png" alt="" />
            <span>2023-07-26 13:53:38，血压140，超出正常血压</span>
          </li>
          <li>
            <img src="/resource/health/img/detail/异常.png" alt="" />
            <span>2023-07-26 13:53:38，血压140，超出正常血压</span>
          </li>
          <li>
            <img src="/resource/health/img/detail/异常.png" alt="" />
            <span>2023-07-26 13:53:38，血压140，超出正常血压</span>
          </li>
        </ul>
      </div>
      <div class="chart-info">
        <ul class="nav nav-pills horizontal-tabs" id="myTab">
          <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }">
            <a href="#" @click.prevent="setActiveTab(index)">{{ tab.label }}</a>
          </li>
        </ul>

        <div id="myTabContent" class="tab-content" style="height: 200px; width: 98%">
          <!-- <div
            v-if="activeTab === 0"
            :key="0"
            :class="['tab-pane', { active: activeTab === 0 }]"
            :id="tabs[0].id"
            style="height: 400px; overflow: hidden"
          >
          </div>

          <div
            v-if="activeTab === 1"
            :key="1"
            :class="['tab-pane', { active: activeTab === 1 }]"
            :id="tabs[1].id"
            style="height: 400px; overflow: hidden"
          >
          </div>

          <div
            v-if="activeTab === 2"
            :key="2"
            :class="['tab-pane', { active: activeTab === 2 }]"
            :id="tabs[2].id"
            style="height: 400px; overflow: hidden"
          >
          </div>

          <div
            v-if="activeTab === 3"
            :key="3"
            :class="['tab-pane', { active: activeTab === 3 }]"
            :id="tabs[3].id"
            style="height: 400px; overflow: hidden"
          >
          </div> -->
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-pane', 'fade', { active: activeTab === index, in: activeTab === index }]"
            :id="tab.id"
            style="height: 250px; overflow: hidden"
          >
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="footer">
      <div class="footer-wendu">
        <div class="footer-value-box"
          >温度：<span id="wendu-zhi" class="footer-value"></span> ℃
        </div>
        <div class="footer-time-box">更新时间：<span id="wendu-shijian"></span></div>
      </div>
      <div class="footer-shidu">
        <div class="footer-value-box"
          >湿度：<span id="shidu-zhi" class="footer-value"></span> %
        </div>
        <div class="footer-time-box">更新时间：<span id="shidu-shijian"></span></div>
      </div>
    </div> -->
  </div>
</template>
<script setup>
  import { ref, onMounted, watch, nextTick } from 'vue';
  import * as echarts from 'echarts';
  //import Time from './Time.vue';
  const props = defineProps({
    userInfo: Object,
  });

  // Reactive reference for active tab index
  const activeTab = ref(0);

  // Tabs data definition
  const tabs = ref([
    {
      label: '心率',
      id: 0,
      chartId: 0,
      option: {
        color: ['#FF7F50', '#87CEFA'], // 示例颜色
        title: {
          text: '心率',
          textStyle: { color: '#fff', fontSize: 12 },
        },
        grid: {
          bottom: '40px',
          left: '80px',
        },
        xAxis: {
          data: [
            '00:00',
            '00:01',
            '00:02',
            '00:03',
            '00:04',
            '00:05',
            '00:06',
            '00:07',
            '00:08',
            '00:09',
            '00:10',
            '00:11',
            '00:12',
            '00:13',
            '00:14',
            '00:15',
            '00:16',
            '00:17',
            '00:18',
            '00:19',
            '00:20',
            '00:21',
            '00:22',
            '00:23',
            '00:24',
            '00:25',
            '00:26',
            '00:27',
            '00:28',
            '00:29',
          ],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: {
            textStyle: { color: '#fff' },
            interval: 5, // 每 5 分钟显示一次 x 轴标签
          },
        },
        yAxis: [
          {
            position: 'left',
            axisLine: { lineStyle: { color: '#fff' } },
            axisLabel: { formatter: '{value} bpm', textStyle: { color: '#fff' } },
          },
        ],
        series: [
          {
            name: '心率',
            type: 'scatter', // 使用 scatter 来显示点状图
            smooth: false, // 禁用平滑曲线
            data: [
              72, 74, 75, 73, 72, 70, 71, 69, 70, 72, 74, 75, 76, 78, 80, 81, 82, 83, 84, 83, 82,
              80, 78, 77, 76, 75, 73, 72, 71, 70,
            ], // 示例数据
          },
        ],
      },
    },
    {
      label: '患者自测血糖',
      id: 1,
      chartId: 1,
      option: {
        color: ['#FF7F50', '#87CEFA'], // 示例颜色
        title: {
          text: '患者自测血糖',
          textStyle: { color: '#fff', fontSize: 12 },
        },
        grid: {
          bottom: '40px',
          left: '80px',
        },
        xAxis: {
          data: [
            '2020-06-12',
            '2020-06-13',
            '2020-06-14',
            '2020-06-15',
            '2020-06-16',
            '2020-06-17',
            '2020-06-18',
          ],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } },
        },
        yAxis: [
          {
            position: 'left',
            axisLine: { lineStyle: { color: '#fff' } },
            axisLabel: { formatter: '{value} mmol/L', textStyle: { color: '#fff' } },
          },
        ],
        series: [
          {
            name: '血糖值',
            type: 'line',
            smooth: true,
            data: [6.6, 7.2, 8.0, 7.8, 6.2, 7.5, 8.1],
          },
        ],
      },
    },
    {
      label: '血糖',
      id: 2,
      chartId: 2,
      option: {
        color: ['#59c4e6', '#93b7e3'],
        title: {
          text: '糖尿病指标',
          textStyle: { color: '#fff', fontSize: 12 },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
        },
        grid: {
          bottom: '30px',
          left: '80px',
        },
        legend: {
          data: ['静脉血糖', '糖化血红蛋白比率'],
          textStyle: { color: '#fff' },
        },
        xAxis: {
          data: ['2019-01', '2019-04', '2019-07', '2019-10', '2020-01', '2020-04'],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } },
        },
        yAxis: [
          {
            position: 'left',
            axisLine: { lineStyle: { color: '#fff' } },
            axisLabel: { formatter: '{value} mmol/L', textStyle: { color: '#fff' } },
          },
          {
            position: 'right',
            axisLine: { lineStyle: { color: '#fff' } },
            axisLabel: { formatter: '{value} %', textStyle: { color: '#fff' } },
          },
        ],
        series: [
          {
            name: '静脉血糖',
            type: 'bar',
            barWidth: 20,
            data: [6.8, 7.5, 7.9, 10.5, 7.0, 6.7],
          },
          {
            name: '糖化血红蛋白比率',
            type: 'bar',
            barWidth: 20,
            yAxisIndex: 1,
            data: [4.2, 5.6, 5.0, 7.5, 5.3, 5.8],
          },
        ],
      },
    },
    {
      label: '睡眠评分',
      id: 3,
      chartId: 3,
      option: {
        color: ['#FF6347', '#FFD700', '#98FB98', '#87CEFA'], // 可以使用不同颜色来表示不同的评分范围
        title: {
          text: '睡眠评分',
          textStyle: { color: '#fff', fontSize: 14 },
        },
        grid: {
          bottom: '40px',
          left: '50px',
        },
        xAxis: {
          type: 'category',
          data: [
            '1月4日',
            '1月5日',
            '1月6日',
            '1月7日',
            '1月8日',
            '1月9日',
            '1月10日', // 近一周的日期
          ],
          axisLine: { lineStyle: { color: '#fff' } },
          axisLabel: { textStyle: { color: '#fff' } },
        },
        yAxis: [
          {
            position: 'left',
            axisLine: { lineStyle: { color: '#fff' } },
            axisLabel: { formatter: '{value}', textStyle: { color: '#fff' } },
            min: 0,
            max: 100, // 评分从0到100
          },
        ],
        series: [
          {
            name: '睡眠评分',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#FFFFFF', // 曲线颜色
            },
            data: [
              75,
              80,
              65,
              78,
              90,
              60,
              72, // 每天的睡眠评分，范围0-100
            ],
            markArea: {
              silent: true,
              itemStyle: { opacity: 0.4 },
              data: [
                // 高评分区间（优秀）
                [
                  { name: '优秀', xAxis: '1月8日', yAxis: 90 },
                  { xAxis: '1月8日', yAxis: 90, itemStyle: { color: '#FFD700' } },
                ],
                // 中等评分区间（良好）
                [
                  { name: '良好', xAxis: '1月5日', yAxis: 80 },
                  { xAxis: '1月5日', yAxis: 80, itemStyle: { color: '#98FB98' } },
                ],
                // 较低评分区间（差）
                [
                  { name: '差', xAxis: '1月9日', yAxis: 60 },
                  { xAxis: '1月9日', yAxis: 65, itemStyle: { color: '#FF6347' } },
                ],
              ],
            },
          },
        ],
      },
    },
  ]);
  const chartInstances = {}; // 存储每个 tab 的 ECharts 实例

  // 初始化图表
  const initChart = (chartId, option) => {
    console.log(chartId);
    if (chartInstances[chartId]) {
      // 图表实例已存在时只更新选项和尺寸
      chartInstances[chartId].setOption(option);
      chartInstances[chartId].resize();
      return;
    }
    const chartDom = document.getElementById(chartId);
    if (!chartDom) {
      console.log('Chart container with id not found');
      return;
    }
    // 创建新实例
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
    chartInstances[chartId] = myChart; // 存储实例
  };

  // 切换 tab 的方法
  const setActiveTab = (index) => {
    console.log(index);
    activeTab.value = index;
  };

  // 监听 activeTab 的变化，在切换 tab 时更新显示
  watch(activeTab, async (newVal, oldVal) => {
    await nextTick(() => {
      const oldTab = tabs.value[oldVal];
      const oldTabDom = document.getElementById(oldTab.chartId);
      oldTabDom.style.display = 'none'; // 隐藏之前的图表

      const newTab = tabs.value[newVal];
      const newTabDom = document.getElementById(newTab.chartId);
      newTabDom.style.display = 'block'; // 显示当前图表

      // 更新图表的 option
      const myChart_1 = chartInstances[newTab.chartId];
      if (myChart_1) {
        const currentOption = myChart_1.getOption();
        if (JSON.stringify(currentOption) !== JSON.stringify(newTab.option)) {
          myChart_1.setOption(newTab.option); // 更新图表数据
        }
        myChart_1.resize(); // 更新图表尺寸
      }
    });
  });

  // 组件挂载时初始化第一个图表
  onMounted(() => {
    nextTick(() => {
      tabs.value.forEach((tab) => {
        initChart(tab.chartId, tab.option); // 初始化每个 tab 的图表
        const TabDom = document.getElementById(tab.chartId);
        TabDom.style.display = 'none'; // 隐藏之前的图表
      });
    });
  });
</script>
<style>
  .leftSide {
    position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background: url('/resource/health/img/detail/底盘.png') center no-repeat;
    background-size: 45% 50%;
    /* background-position: 182px 180px; */
    background-position: 182px 340px;
  }
  .rightSide {
    box-sizing: border-box;
    float: left;
    box-sizing: border-box;
    padding-left: 55%;
    overflow-y: overlay;
    overflow-x: hidden;
    clear: both;
    /* color: #717592; */
    color: #fff;
    min-width: 100%;
    margin-top: 20px;
    /* min-height: 500px; */
    /* padding-top:40px; */
  }
  .shiwangmo {
    position: absolute;
    left: 305px;
    top: 40px;
  }
  .kouqiang {
    position: absolute;
    left: 60px;
    top: 90px;
  }
  .shenjing {
    position: absolute;
    left: 80px;
    top: 40px;
  }
  .shen {
    position: absolute;
    left: 310px;
    top: 240px;
  }
  .tangniaobing {
    position: absolute;
    left: 80px;
    top: 500px;
  }
  .leftSide .humanPic {
    margin-top: 60px;
    height: 70%;
    background: url('/resource/health/img/detail/男.png') center no-repeat;
    background-size: contain;
    color: #fff;
  }
  .leftSide .shijianzhou {
    margin-top: 60px;
    height: 45%;
    color: #fff;
  }
  #leftSide .humanPic .rsImg .bottom {
    position: relative;
    left: 10px;
    font-size: 12px;
  }
  #leftSide .humanPic .xinlv .bottom {
    bottom: 60px;
  }
  #leftSide .humanPic .xueya .bottom {
    top: -26px;
  }
  #leftSide .humanPic .xuetang .bottom {
    top: 5px;
  }
  #leftSide .humanPic .shuimian .bottom {
    /* top: 5px; */
    left: 80px;
  }
  #leftSide .humanPic .tiwen .bottom {
    bottom: 20px;
    left: 112px;
  }
  #leftSide .humanPic .xueyang .bottom {
    top: 5px;
    left: 84px;
  }
  #leftSide .humanPic .rsImg .bottom .cankao {
    color: #3bced9;
    font-weight: bold;
  }
  /* #leftSide .humanPic .xinlv .top {
    position: relative;
    top: 40px;
  } */
  #leftSide .humanPic .xuetang .top {
    position: relative;
    top: 116px;
  }
  #leftSide .humanPic .shuimian .top {
    position: relative;
    /* left: 54px; */
    left: 57px;
  }
  #leftSide .humanPic .tiwen .top {
    position: relative;
    left: 74px;
  }
  #leftSide .humanPic .xueyang .top {
    position: relative;
    left: 57px;
    top: 93px;
  }
  #leftSide .humanPic .rsImg .top {
    margin-left: 15px;
  }
  #leftSide .humanPic .rsImg .top .title {
    float: left;
    position: relative;
    top: 30px;
    font-size: 18px;
  }
  #leftSide .humanPic .rsImg .top .value-box {
    float: left;
    width: 80px;
  }
  /* #leftSide .humanPic .xinlv .top .value-box {
    position: absolute;
    left: 75px;
    top: 5px;
  }
  #leftSide .humanPic .xueya .top .value-box {
    position: absolute;
    left: 75px;
    top: 3px;
  }
  #leftSide .humanPic .xuetang .top .value-box {
    position: absolute;
    left: 80px;
  } */
  /* #leftSide .humanPic .shuimian .top .value-box {
    float: left;
  }
  #leftSide .humanPic .tiwen .top .value-box {
    float: left;
  }
  #leftSide .humanPic .xueyang .top .value-box {
    float: left;
  } */
  #leftSide .humanPic .rsImg .top .value {
    position: absolute;
    font-size: 25px;
    color: #2bced9;
  }
  #leftSide .humanPic .rsImg .top .unit {
    float: left;
    position: relative;
    top: 50px;
    /* font-size: 18px; */
    margin-right: 20px;
  }
  #leftSide .humanPic .xinlv .top .value {
    left: 110px;
    top: 21px;
  }
  #leftSide .humanPic .xueya .top .value {
    left: 55px;
    top: 3px;
  }
  #leftSide .humanPic .xuetang .top .value {
    left: 114px;
    top: 20px;
  }
  #leftSide .humanPic .shuimian .top .value {
    left: 27px;
    top: 20px;
  }
  #leftSide .humanPic .tiwen .top .value {
    left: 22px;
    top: 23px;
    font-size: 21px;
  }
  #leftSide .humanPic .xueyang .top .value {
    top: 17px;
    left: 24px;
  }
  .text-grey {
    color: #8d8d8d;
  }
  /* 那几个血糖血氧的具体位置 */
  /* 血压 */
  #leftSide .humanPic .rsImg:first-child {
    position: absolute;
    top: 28%;
    right: 59%;
  }
  /* 心率 */
  #leftSide .humanPic .rsImg:nth-child(2) {
    position: absolute;
    top: 3%;
    right: 60%;
    width: 250px;
  }
  /* 体温 */
  #leftSide .humanPic .rsImg:nth-child(3) {
    position: absolute;
    top: 26%;
    right: 0%;
  }
  /* 睡眠 */
  #leftSide .humanPic .rsImg:nth-child(4) {
    position: absolute;
    top: 4%;
    right: 0%;
  }
  /* 血氧 */
  #leftSide .humanPic .rsImg:nth-child(5) {
    position: absolute;
    top: 38%;
    right: 0%;
  }
  /* 血糖 */
  #leftSide .humanPic .rsImg:nth-child(6) {
    position: absolute;
    top: 36%;
    right: 60%;
  }
  .footer {
    width: 800px;
    position: absolute;
    left: 8%;
    bottom: 7%;
    color: #fff;
    line-height: 20px;
    font-size: 12px;
  }
  #rightSide .userInfo {
    /* background-color: #042343; */
    width: 90%;
  }
  #rightSide .userInfo .border_1 {
    width: 100%;
  }

  #rightSide .userInfo .photo {
    width: 15%;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
  }

  #rightSide .userInfo .photo img {
    width: 85%;
  }

  #rightSide .userInfo .intro {
    float: left;
    width: 80%;
    display: table-cell;
    /*按照bai单元格的样式显示元素*/
    vertical-align: bottom;
    /* background: #1B6D85; */
    margin-left: 3%;
    padding-top: 6px;
  }
  #rightSide .userInfo .intro .title {
    /* font-size: x-large; */
    color: #00d9f3;
  }
  #rightSide .userInfo .intro .desc {
    font-size: 16px;
    line-height: 30px;
    margin-top: -18px;
  }
  #rightSide .userInfo .intro .fenge {
    margin-top: 10px;
  }
  #rightSide .userInfo .intro .result {
    background: url('/resource/health/img/detail/控制满意.png') center no-repeat;
    /* background-size: 110% 100%; */
    color: #00d9f3;
    height: 30px;
  }

  #rightSide .userInfo .info ul {
    margin: 0px;
    padding: 0px;
    font-size: normal;
    height: 50px;
    list-style-type: none;
    padding-left: 50px;
  }

  #rightSide .userInfo .info ul:last-child {
    border-bottom: none;
  }

  #rightSide .userInfo .info li {
    line-height: 30px;
    float: left;
    margin-right: 30px;
  }

  #rightSide .userInfo .right {
    float: right !important;
  }

  #rightSide .userInfo .info span {
    /* font-size: x-large; */
    color: #00d9f3;
  }

  #rightSide .title {
    font-size: large;
    color: #5cffe0;
  }

  #rightSide .warning-box {
    /* margin:5px 0; */
    width: 90%;
    font-size: 12px;
    margin-top: 10px;
  }

  #rightSide .warning-box h3 {
    font-weight: bold;
    color: #00d9f3;
    background: url('/resource/health/img/detail/标题.png') center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-left: 40px;
    font-size: 16px;
    /* height: 35px; */
    line-height: 30px;
  }
  #rightSide .warning-box ul {
    width: 96%;
    max-height: 200px;
    list-style: none;
  }
  #rightSide .warning-box ul li {
    line-height: 25px;
    margin: 5px 0;
    border-left: 4px solid red;
    background-color: rgb(255 0 0 / 25%);
    width: 100%;
    padding-left: 20px;
  }
  #rightSide .warning-box ul li span {
    margin-left: 10px;
    vertical-align: middle;
  }
  #rightSide .chart-info {
    width: 90%;
    margin-top: 15px;
  }
  #rightSide .chart-info ul {
    font-weight: bold;
    color: #00d9f3;
    background: url('/resource/health/img/detail/标题.png') center no-repeat;
    background-size: 100%;
    width: 100%;
    padding-left: 30px;
    font-size: 16px;
    /* height: 35px; */
    line-height: 30px;
    margin-bottom: 5px;
  }
  #rightSide .nav > li > a {
    padding: 0 15px;
    color: #337ab7;
  }
  .nav-pills > li.active > a,
  .nav-pills > li.active > a:hover,
  .nav-pills > li.active > a:focus {
    background: none !important;
    color: #00d3f0 !important;
  }
  #rightSide .nav > li > a:hover,
  .nav > li > a:focus {
    background: none !important;
  }
  .footer-value-box {
    width: 100%;
    display: inline-block;
    /* font-size: 20px; */
    line-height: 30px;
    /* text-align: center; */
  }
  .footer-time-box {
    /* margin-left: 20px; */
  }
  .footer-value {
    color: #2bced9;
    font-weight: bold;
    font-size: 20px;
  }
  .footer-wendu {
    width: 50%;
    float: left;
  }
  .footer-shidu {
    width: 50%;
    float: right;
  }
  .line-width {
    width: 280px;
  }
  .left,
  .right {
    flex: 1; /* 使它们平分宽度 */
  }
  .left {
    text-align: left; /* 文字居中对齐 */
  }
  .right {
    text-align: center; /* 文字居中对齐 */
  }
  /* 使用 flexbox 让标签水平排列 */
  .horizontal-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-around; /* 标签之间等间距 */
  }

  .horizontal-tabs li {
    margin-right: 10px; /* 标签之间的间距 */
  }

  .horizontal-tabs a {
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
  }

  .horizontal-tabs li.active a {
    background-color: #007bff; /* 激活标签的背景色 */
    color: white;
  }
</style>
